style(FR-1577): improve dashboard statistics display design and progress visualization #4427

yomybaby · 2025-10-21T09:17:43Z

Summary

Improve dashboard statistics display design and progress visualization by refactoring the BAIStatistic component and standardizing progress display across dashboard components.

Changes

Refactored BAIStatistic component to use progressMode prop instead of showProgress
Replaced custom progress steps implementation with Ant Design Progress component
Added three progress modes: 'normal', 'ghost', and 'hidden'
Updated all dashboard components to use the new progress mode system
Improved visual consistency across resource statistics displays
Enhanced styling with better background colors and layout

Affected Components

packages/backend.ai-ui/src/components/BAIStatistic.tsx
packages/backend.ai-ui/src/components/ResourceStatistics.tsx
react/src/components/AgentStats.tsx
react/src/components/MyResource.tsx
react/src/components/MyResourceWithinResourceGroup.tsx
react/src/components/SessionCountDashboardItem.tsx
react/src/components/TotalResourceWithinResourceGroup.tsx

yomybaby · 2025-10-21T09:18:04Z

style(FR-1577): improve dashboard statistics display design and progress visualization #4427 👈 (View in Graphite)
feat(FR-1575): merge admin dashboard into user dashboard #4425
feat(FR-873): set dashboard page as a default #3554
feat(FR-1240): add agent statistics and resource monitoring capabilities #4344 : 1 other dependent PR (#4399 )
feat(FR-1531): add active agent list to admin dashboard page #4365
feat(FR-1530): Implement window focus check for automatic refresh interval #4358 : 1 other dependent PR (#4371 )
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-10-21T09:19:49Z

Coverage report for `./packages/backend.ai-ui`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	51.38%	130/253
🔴	Branches	30.3%	80/264
🔴	Functions	34.48%	20/58
🔴	Lines	53.85%	119/221

Test suite run success

55 tests passing in 3 suites.

Report generated by 🧪jest coverage report action from 1e11ddf

github-actions · 2025-10-21T09:20:20Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	4.67%	532/11384
🔴	Branches	3.79%	302/7974
🔴	Functions	2.88%	102/3538
🔴	Lines	4.62%	514/11124

Test suite run success

121 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 1e11ddf

agatha197

can you remove top padding of session count?

react/src/components/SessionCountDashboardItem.tsx

Copilot

Pull Request Overview

This PR refactors the dashboard statistics display design by standardizing how progress indicators are shown across components. The main change replaces a boolean showProgress prop with a more flexible progressMode prop that supports three states: 'normal', 'ghost', and 'hidden'. The implementation migrates from custom progress steps to Ant Design's Progress component for better visual consistency.

Key Changes:

Introduced progressMode prop replacing showProgress in BAIStatistic component
Replaced custom progress bar implementation with Ant Design Progress component
Updated styling and typography properties across statistics components for improved visual consistency

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/backend.ai-ui/src/components/BAIStatistic.tsx	Core refactoring: replaced boolean `showProgress` with `progressMode`, implemented Ant Design Progress component, updated styling
packages/backend.ai-ui/src/components/ResourceStatistics.tsx	Updated to use new `progressMode` prop, added conditional styling based on display type
react/src/components/AgentStats.tsx	Updated prop from `showProgress={true}` to `progressMode="normal"`
react/src/components/MyResource.tsx	Updated prop from `showProgress={true}` to `progressMode="normal"`
react/src/components/MyResourceWithinResourceGroup.tsx	Updated prop from `showProgress={false}` to `progressMode="ghost"`
react/src/components/TotalResourceWithinResourceGroup.tsx	Updated prop from `showProgress={true}` to `progressMode="normal"`
react/src/components/SessionCountDashboardItem.tsx	Replaced BAIPanelItem with BAIStatistic using `progressMode="hidden"`, updated layout styling
react/src/components/BAIPanelItem.tsx	Removed `strong` prop from Typography components
react/src/components/StorageStatusPanelCard.tsx	Removed unused `usePrimaryColors` import, updated Typography components, added color prop to BAIPanelItem
react/src/components/StorageStatusPanel.tsx	File completely deleted (348 lines removed)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/backend.ai-ui/src/components/BAIStatistic.tsx

ironAiken2

LGTM

agatha197

LGTM

graphite-app · 2025-10-28T07:22:22Z

Merge activity

Oct 28, 7:22 AM UTC: agatha197 added this pull request to the Graphite merge queue.
Oct 28, 7:23 AM UTC: Merged by the Graphite merge queue.

…ess visualization (#4427) Resolves #4426 ([FR-1577](https://lablup.atlassian.net/browse/FR-1577)) ## Summary Improve dashboard statistics display design and progress visualization by refactoring the BAIStatistic component and standardizing progress display across dashboard components. ## Changes - Refactored `BAIStatistic` component to use `progressMode` prop instead of `showProgress` - Replaced custom progress steps implementation with Ant Design Progress component - Added three progress modes: 'normal', 'ghost', and 'hidden' - Updated all dashboard components to use the new progress mode system - Improved visual consistency across resource statistics displays - Enhanced styling with better background colors and layout ## Affected Components - `packages/backend.ai-ui/src/components/BAIStatistic.tsx` - `packages/backend.ai-ui/src/components/ResourceStatistics.tsx` - `react/src/components/AgentStats.tsx` - `react/src/components/MyResource.tsx` - `react/src/components/MyResourceWithinResourceGroup.tsx` - `react/src/components/SessionCountDashboardItem.tsx` - `react/src/components/TotalResourceWithinResourceGroup.tsx` [FR-1577]: https://lablup.atlassian.net/browse/FR-1577?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

agatha197 mentioned this pull request Oct 21, 2025

feat(FR-873): set dashboard page as a default #3554

Merged

5 tasks

github-actions bot assigned yomybaby Oct 21, 2025

github-actions bot added the size:M 30~100 LoC label Oct 21, 2025

yomybaby mentioned this pull request Oct 21, 2025

feat(FR-1575): merge admin dashboard into user dashboard #4425

Merged

5 tasks

graphite-app bot changed the base branch from feat_FR-1575_/merge-dashboard to graphite-base/4427 October 22, 2025 09:27

yomybaby requested review from agatha197 and ironAiken2 October 22, 2025 09:35

yomybaby marked this pull request as ready for review October 22, 2025 09:35

yomybaby force-pushed the style/FR-1577-improve-dashboard-statistics-design branch from 504b143 to 8fcc687 Compare October 23, 2025 02:22

yomybaby force-pushed the graphite-base/4427 branch from ea01880 to de8b846 Compare October 23, 2025 02:22

yomybaby changed the base branch from graphite-base/4427 to main October 23, 2025 02:22

github-actions bot added size:L 100~500 LoC and removed size:M 30~100 LoC labels Oct 23, 2025

agatha197 requested changes Oct 28, 2025

View reviewed changes

agatha197 reviewed Oct 28, 2025

View reviewed changes

react/src/components/SessionCountDashboardItem.tsx Show resolved Hide resolved

yomybaby force-pushed the style/FR-1577-improve-dashboard-statistics-design branch from 8fcc687 to e6beb7a Compare October 28, 2025 06:47

Copilot AI review requested due to automatic review settings October 28, 2025 06:47

github-actions bot added size:XL 500~ LoC and removed size:L 100~500 LoC labels Oct 28, 2025

Copilot AI reviewed Oct 28, 2025

View reviewed changes

packages/backend.ai-ui/src/components/BAIStatistic.tsx Show resolved Hide resolved

packages/backend.ai-ui/src/components/BAIStatistic.tsx Show resolved Hide resolved

ironAiken2 approved these changes Oct 28, 2025

View reviewed changes

agatha197 approved these changes Oct 28, 2025

View reviewed changes

graphite-app bot force-pushed the style/FR-1577-improve-dashboard-statistics-design branch from e6beb7a to 1e11ddf Compare October 28, 2025 07:22

graphite-app bot merged commit 1e11ddf into main Oct 28, 2025
11 checks passed

graphite-app bot deleted the style/FR-1577-improve-dashboard-statistics-design branch October 28, 2025 07:23

github-pages bot temporarily deployed to github-pages October 28, 2025 07:23 Inactive

vercel bot deployed to Production October 28, 2025 07:30 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

style(FR-1577): improve dashboard statistics display design and progress visualization #4427

style(FR-1577): improve dashboard statistics display design and progress visualization #4427

Uh oh!

yomybaby commented Oct 21, 2025 •

edited by atlassian bot

Loading

Uh oh!

yomybaby commented Oct 21, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 21, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 21, 2025 •

edited

Loading

Uh oh!

agatha197 left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

ironAiken2 left a comment

Uh oh!

agatha197 left a comment

Uh oh!

graphite-app bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

style(FR-1577): improve dashboard statistics display design and progress visualization #4427

style(FR-1577): improve dashboard statistics display design and progress visualization #4427

Uh oh!

Conversation

yomybaby commented Oct 21, 2025 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Affected Components

Uh oh!

yomybaby commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions bot commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./packages/backend.ai-ui

Test suite run success

Uh oh!

github-actions bot commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yomybaby commented Oct 21, 2025 •

edited by atlassian bot

Loading

yomybaby commented Oct 21, 2025 •

edited

Loading

github-actions bot commented Oct 21, 2025 •

edited

Loading

Coverage report for `./packages/backend.ai-ui`

github-actions bot commented Oct 21, 2025 •

edited

Loading

Coverage report for `./react`

graphite-app bot commented Oct 28, 2025 •

edited

Loading